// 引入公共样式
require("../../assets/css/communal.less");

// 引入字体图标
require("../../assets/fonts/fitness-fonts/iconfont.css");

const axios = require("../../util/axios.js");
// 引入工具js
const dom = require("../../util/dom.js");

// 引入尾部导航栏样式
require("../../assets/css/common-css/tabber.less");

// 引入头部导航样式
require("../../assets/css/common-css/navbar.less");

// 引入当前页样式
require("./sports_course.less");

// 当前页js
document.addEventListener("DOMContentLoaded", function () {
	// 渲染底部导航
	dom.tabber("sports_course");

	// 渲染头部导航
	dom.navbar("sports_course");

	// 获取课程列表
	axios.get("/api/train/courseList").then((res) => {
		// 获取课程列表
		let courseData = res.data.data;

		// 获取最新课程
		let newCourse = courseData.shift();

		// 渲染至页面
		dom.$(".new-course img").src = axios.defaults.baseURL + newCourse.imgurl;
		dom.$(".new-course h4").textContent = newCourse.name;
		dom.$(".new-course p").textContent = newCourse.desc;
		// 跳转动态页面
		dom.$(".new-course a").href =
			"sports_details.html?id=" + newCourse.courseId;

		// 渲染课程列表
		let html = "";
		// 遍历courseData拿到数据
		courseData.forEach((v) => {
			html += `
					<li>
						<a href="sports_details.html?id=${v.courseId}">
							<img src="${axios.defaults.baseURL + v.imgurl}" alt="" />
							<p class="title">${v.name}</p>
							<p class="introduce">${v.desc}</p>
						</a>
					</li>
					`;
		});
		dom.$(".course-list ul").innerHTML = html;
	});
});
